<script setup>
// import { ref } from "vue";

// 定义视频源
// const videoSrc = ref("@/assets/测试.mp4"); // 替换为你的视频路径

// 播放视频的方法
const playVideo = () => {
  const video = document.querySelector(".video-player");
  video?.play();
};

// 暂停视频的方法
const pauseVideo = () => {
  const video = document.querySelector(".video-player");
  video?.pause();
};
</script>

<template>
  <el-container class="video-container">
    <el-header>
      <h3>视频展示</h3>
    </el-header>
    <el-main>
      <video
        controls
        class="video-player"
        src="@/assets/测试.mp4"
        width="100%"
        height="auto"
        loop="true"
        autoplay="true"
      >
        您的浏览器不支持视频播放。
      </video>
    </el-main>
    <el-footer>
      <el-button type="primary" @click="playVideo">播放</el-button>
      <el-button @click="pauseVideo">暂停</el-button>
    </el-footer>
  </el-container>
</template>

<style scoped>
.video-container {
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.video-player {
  display: block;
  max-height: 100%;
  border: none;
  
}
</style>
